<template>
	<div>
		<div class="sss">
			<div class="dianpu">
				<router-link to="/" id="jtz">
					<img src="../assets/jtz.png" alt="" style="width: 2.5rem;">
				</router-link>
				<router-link to="" id="kt">
					<img src="http://elm.cangdu.org/img/16f1138a58861088.jpg" style="width: 5rem;">
				</router-link>
				<router-link to="">
					<div class="you">
						<h3>{{datas.category}}</h3>
						<p>商家配送/分钟到达/{{tips}}</p>
						<p class="gg">{{datas.promotion_info}}</p>
						<img src="../assets/zjt.png" alt="">
					</div>
				</router-link>
			</div>
			<div style="height: 2.4rem" class="akl">
				<router-link to="" id="mj">
					<div style="height: 2rem;">
						<span style="background-color: rgb(240,115,115);border-color: rgb(240,15,115);margin-left: 1rem;color: white;padding: 0.15rem;">减</span>
						<span id="manjian">满30减5,满60减8(APP专享)</span>
						<p>1个活动</p>
						<img src="../assets/zjt.png" style="width: 1.5rem;height: 1.5rem;position: absolute;right: 1rem;">
					</div>
				</router-link>
			</div>

		</div>
		<Pj></Pj>
	</div>
</template>

<script>
	import Pj from "../components/pingjia";
	export default {
		name: 'dianpu',
		components: {
			Pj:Pj,
		},
		data: function() {
			return {
				datas: '',
				tips: "",
			}
		},
		created: function() {
			window.console.log(this);
			let obj = this;
			//axios 完成数据的get网络请求
			this.$axios({
				url: 'https://elm.cangdu.org/shopping/restaurant/1',
				method: 'GET',
				// key:
			}).then(function(res) {
				obj.datas = res.data;
				obj.tips = res.data.piecewise_agent_fee.tips
			})
		},
		methods: {

		}

	}
</script>

<style scoped>
	* {
		padding: 0;
		margin: 0;
	}

	html,body {
		width: 100%;
	}

	.sss {
		width: 100%;
		background: rgba(0, 0, 0, 0.3);
		display: flex;
		flex-direction: column;
	}

	.dianpu {
		width: 100%;
		position: relative;
		display: flex;
		flex-direction: row;
		margin-top:0.4rem;
	}

	#jtz {
		width: 10%;
	}

	#kt {
		width: 20%;
	}

	.you {
		width: 65%;
		position: absolute;
		color: white;
		/* background: red; */
		margin-left: 1rem;
	}

	.you p {
		margin-top: .6rem;
		font-size: 0.4rem;
	}

	.you img {
		width: 3rem;
		position: absolute;
		right: 0;
		top: 0.6rem;
	}

	#mj {
		position: absolute;
		top: 6rem;
		width: 100%;
		text-decoration: none;
		font-size: 0.8rem
	}

	#manjian {
		position: absolute;
		margin-left: 0.2rem;
		display: inline-block;
		width: 18rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		color: white;
	}

	#mj p {
		color: white;
		position: absolute;
		right: 3rem;
		display: inline-block;
	}
</style>
